<template>

    <div class="background">
        <div class="left">
            <img src="../assets/首页1.jpg" style="width: 600px;height:auto;position: relative;top: 0px;left: 27px;">
            <div class="head">欢迎登录使用~</div>
        </div>
        <!-- 右边三个头像 -->
       
        <div class="right" @mouseenter="showTooltip = true" @mouseleave="showTooltip = false">
            <router-link to="/Login">
            <div class="box_home" value="1" >
                <img class="picture1" src="../assets/首页3.png" >
                <span class="font_identity">组员</span>
            </div>
            </router-link>
            <router-link to="/Login">
            <div class="box_home" value="2" >
                <img class="picture1" src="../assets/首页3.png">
                <span class="font_identity">组长</span>
            </div>
            </router-link>
            <router-link to="/Login">
            <div class="box_home" value="3" >
                <img class="picture1" src="../assets/首页3.png">
                <span class="font_identity">审核员</span>
            </div>
            </router-link>
            
        </div>
        <!-- v-if="showTooltip" -->
            <div class="hover-div" v-if="showTooltip" >
                请选择身份
            </div>
        
    </div>
</template>

<script>
export default {
    name:'HomePage',
  data() {
    return {
      showTooltip: false, // 控制提示框的显示与隐藏
    };
  },
};
</script>


<style scoped>
.right.show-tooltip.hover-div{
    /* 当showTooltip为true时显示提示框 */
  opacity: 1;
}
.hover-div {
    display: block;
    position: relative;
    top: 100px;
    left:215px;
    width: 300px;
    height: 50px;
    background-color:rgb(129,211,248);
    border-radius: 20px;
    text-align: center;
    font-size: 28px;
    font-family: Arial;
    font-display: normal;
    color:rgb(255,255,255);
    align-items: center;
    
}
.right {
    position: absolute;
    display: flex;
    flex-direction: row;
    margin-top: auto;
    margin-bottom: auto;
    box-sizing: border-box;
    height: 300px;
    width:800px;
    top: 200px;
    left: 600px;
}

.box_home {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-right: 25px;
    box-sizing: border-box;
    float:left;
    
}

.picture1 {
    width: 230px;
   height: auto;
}

.font_identity {
    font-size: 29px;
    font-family: Arial;
    font-display: normal;
    color: rgb(51, 51, 51);
}


.background {
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(232, 232, 254);
    border: 2px solid rgb(206, 206, 207);
}

.head {
    position: relative;
    box-sizing: border-box;
    width: 550px;
    height: 100px;
    font-family: Arial;
    text-align: center;
    font-size: 71px;
    color: rgb(129, 211, 248);
    background-color: rgb(232, 232, 254);
    font-weight: 700;
    left: 25px;
}
</style>
